{extend name="../template/small" /}

{block name='body'}
<div class="layui-card">
    <div class="layui-card-body">
        <script type="text/html" id="headBtn">
            <a class="layui-btn" lay-event="add"><i class="layui-icon layui-icon-addition"></i> 添加新管理员</a>
        </script>
        <script type="text/html" id="rightBtn">
            <a class="layui-btn" lay-event="edit">编辑</a>
        </script>
        <table class="layui-hide" id="tables" lay-filter="tables"></table>
    </div>
</div>
{/block}

{block name="model"}
<div class="form-box-add" style="position: relative; display:none;">
    <form class="layui-form p-4" action="" lay-filter="form-box-add">
        <div class="layui-form-item">
            <div class="my-1">帐号：</div>
            <input type="text" name="username" lay-verify="required" placeholder="请输入帐号" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-item">
            <div class="my-1">密码：</div>
            <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-item">
            <div class="my-1">确认密码：</div>
            <input type="password" name="password2" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-item">
            <div class="my-1">昵称：</div>
            <input type="text" name="nickname" lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-item">
            <div class="my-1">备注：</div>
            <input type="text" name="remark" placeholder="备注选填" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-item text-right">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="form-put">提交</button>
        </div>
    </form>
</div>

<div class="form-box-edit" style="position: relative; display:none;">
    <form class="layui-form p-4" action="" lay-filter="form-box-edit">
        <input type="hidden" name="id" class="form-control" value="">

        <div class="layui-form-item">
            <div class="my-1">帐号：</div>
            <input type="text" name="username" disabled autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-item">
            <div class="my-1">昵称：</div>
            <input type="text" name="nickname" lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-item">
            <div class="my-1">备注：</div>
            <input type="text" name="remark" placeholder="备注选填" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-item text-right">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="form-put">提交</button>
        </div>
    </form>
</div>
{/block}

{block name="script"}
<script>
    layui.use(['form', 'table', 'soulTable'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var soulTable = layui.soulTable;

        var t1 = table.render({
            elem: '#tables',
            url: getApiUrl("{:url('apiadmin/partners/getPartnersAll')}"),
            parseData: function(res) {
                return {
                    "code": res.errcode,
                    "msg": res.errmsg,
                    "count": res.count,
                    "data": res.data
                };
            },
            toolbar: "#headBtn",
            size: "lg",
            cols: [[
                { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' },
                { field: 'username', title: '帐号' },
                { field: 'nickname', title: '昵称' },
                { field: 'role', title: '角色' },
                { field: 'auth', title: '权限' },
                { field: 'create_time', title: '创建时间', hide: true },
                { field: 'update_time', title: '修改时间', hide: true },
                { title: '操作', width: 100, align: 'center', templet: '#rightBtn' }
            ]],
            done: function () {
                soulTable.render(this)
            }
        });

        // 监听头部工具条事件
        table.on('toolbar(tables)', function(obj) {
            console.log(obj);
            var checkStatus = table.checkStatus(obj.config.id);
            if (obj.event == "add") {
                $(".form-box-add form")[0].reset()
                layer.open({
                    type: 1,
                    title: '添加',
                    shadeClose: true,
                    skin: "myskin",
                    area: ['400px', 'auto'],
                    content: $(".form-box-add"),
                    success: function (layero) {
                        form.on('submit(form-put)', function (data) {
                            layer.load(1);
                            $.ajax({
                                url: getApiUrl("{:url('admin/admin/register')}"),
                                method: 'post',
                                data: data.field,
                                dataType: 'JSON',
                                success: function (res) {
                                    layer.closeAll();
                                    if (res.status == "success") {
                                        // 刷新
                                        t1.reload();
                                    } else {
                                        layer.alert(res.message);
                                    }
                                },
                                error: function (data) {
                                    layer.closeAll();
                                    layer.alert("网络出错");
                                }
                            });
                            return false;
                        });
                    }
                });
            }
        });

        // 监听行工具条事件 
        table.on('tool(tables)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            var tr = obj.tr;

            // 编辑
            if (layEvent == 'edit') {
                console.log(data);
                form.val('form-box-edit', data);

                // auth 这个名称被占用了，表单用 auth_name 这个名称代替
                form.val('form-box-edit', {
                    "auth_name": data.auth
                });

                layer.open({
                    type: 1,
                    title: '修改',
                    shadeClose: true,
                    skin: "myskin",
                    area: ['400px', 'auto'],
                    content: $(".form-box-edit"),
                    success: function (layero) {
                        form.on('submit(form-put)', function (data) {
                            layer.load(1);
                            $.ajax({
                                url: getApiUrl("{:url('admin/admin/updateAdminInfo')}"),
                                method: 'post',
                                data: data.field,
                                dataType: 'JSON',
                                success: function (res) {
                                    layer.closeAll();
                                    if (res.status == "success") {
                                        // 刷新
                                        t1.reload();
                                    } else {
                                        layer.alert(res.message);
                                    }
                                },
                                error: function (data) {
                                    layer.closeAll();
                                    layer.alert("网络出错");
                                }
                            });
                            return false;
                        });
                    }
                });
            }
        });
    });
</script>
{/block}